<template>
  <div>
    <Modal width="50" title="查看图片" v-model="largerImageByModal" @on-cancel="reset">
      <div style="display: flex; align-items: center; justify-content: center">
        <img :src="imgUrl" alt="" style="width: 600px" />
      </div>
    </Modal>
  </div>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';
import { Modal } from 'ant-design-vue';
const largerImageByModal = ref(false);
const imgUrl = ref('false');
const openLargerImageByModal = (imgUrl) => {
  largerImageByModal.value = true;
  imgUrl.value = imgUrl;
};
const reset = () => {
  imgUrl.value = '';
};
watch(largerImageByModal, async (val) => {
  if (val === false) {
    reset();
  }
});
</script>

<style lang="less" scoped></style>
